<!DOCTYPE html>
<html
  layout:decorator="components/layout"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
>
<head>
  <title>系统服务器配置</title>
</head>
<body>
<div
  layout:fragment="content"
  id="app" v-cloak
>
  <div class="container">
    <div class="myHeader">
      <div class="myHeader-title">
        系统服务器监控信息
      </div>
      <div class="myHeader-tool">
        <el-button
          type="primary"
          size="mini"
          @click="addTableRow('serverConfigList')"
        >新增
        </el-button>
      </div>
    </div>
    <el-row>
      <table
        width="100%"
        border="0"
        class="el-table el-table--border"
        cellspacing="0"
        cellpadding="0"
      >
        <tbody>
        <tr>
          <td>序号</td>
          <td>信息</td>
          <td>操作</td>
        </tr>
        <tr v-for="(serverConfig,index) in formData.serverConfigList">
          <td>
            {{index+1}}
          </td>
          <td>
            <el-form label-width="120px" label-position="right">
              <el-form-item label="服务器名称:">
                <el-input
                  v-validate="'required|max:30'"
                  :name="'name_'+index"
                  v-model="serverConfig.name"
                  maxlength="30"
                  show-word-limit
                ></el-input>
                <span class="field-error" v-show="errors.has('name_'+index+':required')">请填写服务器名称</span>
                <span class="field-error" v-show="errors.has('name_'+index+':max')">服务器名称长度最大为 30 位</span>
              </el-form-item>
              <el-form-item label="ip:">
                <el-input
                  v-model="serverConfig.ip"
                  :name="'ip_'+index"
                  v-validate="'required|ip'"
                ></el-input>
                <span class="field-error" v-show="errors.has('ip_'+index+':required')">请填写ip</span>
                <span class="field-error" v-show="errors.has('ip_'+index+':ip')">请填写正确的ip</span>
              </el-form-item>
              <el-form-item label="CPU阈值(%):">
                <el-input
                  v-model="serverConfig.cpuThreshold"
                  maxlength="8"
                  show-word-limit
                  :name="'cpuThreshold_'+index"
                  max="100"
                  v-validate="'required|numeric|max:8'"
                >
                  <template slot="append">%</template>
                </el-input>
                <span class="field-error" v-show="errors.has('cpuThreshold_'+index+':required')">请填写CPU阈值</span>
                <span class="field-error" v-show="errors.has('cpuThreshold'+index+':numeric')">CPU阈值必须为数字</span>
                <span class="field-error" v-show="errors.has('cpuThreshold_'+index+':max')">CPU阈值长度最大为 8 位</span>
              </el-form-item>
              <el-form-item label="内存阈值(G):">
                <el-input
                  v-model="serverConfig.memThreshold"
                  maxlength="15"
                  v-validate="'required|numeric|max:15'"
                  :name="'memThreshold_'+index"
                  show-word-limit
                >
                  <template slot="append">G</template>
                </el-input>
                <span class="field-error" v-show="errors.has('memThreshold_'+index+':required')">请填写存储阈值</span>
                <span class="field-error" v-show="errors.has('memThreshold_'+index+':numeric')">内存阈值必须为数字</span>
                <span class="field-error" v-show="errors.has('memThreshold_'+index+':max')">存储阈值长度最大为 15 位</span>
              </el-form-item>
              <el-form-item label="存储阈值(G):">
                <el-input
                  v-model="serverConfig.storageThreshold"
                  maxlength="20"
                  v-validate="'required|numeric|max:20'"
                  :name="'storageThreshold_'+index"
                  show-word-limit
                >
                  <template slot="append">G</template>
                </el-input>
                <span class="field-error" v-show="errors.has('storageThreshold_'+index+':required')">请填写存储阈值</span>
                <span class="field-error" v-show="errors.has('storageThreshold_'+index+':numeric')">存储阈值必须为数字</span>
                <span class="field-error" v-show="errors.has('storageThreshold_'+index+':max')">存储阈值长度最大为 20 位</span>
              </el-form-item>
              <el-form-item label="备注:">
                <el-input
                  type="textarea"
                  maxlength="255"
                  show-word-limit
                  v-validate="'max:255'"
                  :name="'remarks_'+index"
                  v-model="serverConfig.remarks"
                ></el-input>
                <span class="field-error" v-show="errors.has('remarks_'+index+':max')">备注长度最大为 255 位</span>
              </el-form-item>
            </el-form>
          </td>
          <td align="center">
            <el-row>
              <el-button
                type="primary"
                size="mini"
                @click="addTableRow('serverConfigList')"
              >新增
              </el-button>
            </el-row>
            <el-row>
              <el-button
                size="mini"
                type="danger"
                @click="deleteTableRow('serverConfigList',index)"
              >删除
              </el-button>
            </el-row>

          </td>
        </tr>
        </tbody>
      </table>
    </el-row>

    <div class="myHeader">
      <div class="myHeader-title">
        镜像网卡信息
      </div>
      <div class="myHeader-tool">
        <el-button
          type="primary"
          size="mini"
          @click="addTableRow('mirrorNetworkCardInfoList')"
        >新增
        </el-button>
      </div>
    </div>
    <el-row>
      <table
        width="100%"
        border="0"
        class="el-table el-table--border"
        cellspacing="0"
        cellpadding="0"
      >
        <tbody>
        <tr>
          <td>序号</td>
          <td>信息</td>
          <td>操作</td>
        </tr>
        <tr v-for="(mirrorNetworkCardInfo,index) in formData.mirrorNetworkCardInfoList">
          <td>{{index+1}}</td>
          <td>
            <el-form label-width="120px" label-position="right">
              <el-form-item label="端口:">
                <el-input
                  v-validate="'required|max:6'"
                  :name="'port_'+index"
                  v-model="mirrorNetworkCardInfo.port"
                  maxlength="6"
                  show-word-limit
                ></el-input>
                <span class="field-error" v-show="errors.has('port_'+index+':required')">请填写端口</span>
                <span class="field-error" v-show="errors.has('port_'+index+':max')">端口长度最大为 6 位</span>
              </el-form-item>
              <el-form-item label="端口编号:">
                <el-input
                  v-model="mirrorNetworkCardInfo.portNo"
                  :name="'portNo_'+index"
                  v-validate="'required|max:30'"
                  maxlength="30"
                  show-word-limit
                ></el-input>
                <span class="field-error" v-show="errors.has('portNo_'+index+':required')">请填写端口编号</span>
                <span class="field-error" v-show="errors.has('portNo_'+index+':max')">端口编号长度最大为 30 位</span>
              </el-form-item>
              <el-form-item label="类型:">
                <el-select
                  v-model="mirrorNetworkCardInfo.type"
                  v-validate="'required'"
                  :name="'type_'+index"
                  show-word-limit
                >
                  <el-option v-for="(val, key) in typeMap" :key="key" :value="key" :label="val"></el-option>
                </el-select>
                <span class="field-error" v-show="errors.has('type_'+index+':required')">请选择类型</span>
              </el-form-item>

              <el-form-item label="丢包率阈值(4位小数点):">
                <el-input
                  v-model="mirrorNetworkCardInfo.packetLossRate"
                  maxlength="8"
                  show-word-limit
                  :name="'packetLossRate_'+index"
                  v-validate="'max:8'"
                >
                  <template slot="append">%</template>
                </el-input>
                <span class="field-error" v-show="errors.has('packetLossRate_'+index+':max')">丢包率阈值长度最大为 8 位</span>
                </el-form-item>

              <el-form-item label="规格:">
                <el-input
                  v-model="mirrorNetworkCardInfo.specification"
                  maxlength="10"
                  show-word-limit
                  :name="'specification_'+index"
                  v-validate="'max:10'"
                >
                  <template slot="append">G</template>
                </el-input>
                <span class="field-error" v-show="errors.has('specification_'+index+':max')">规格长度最大为 10 位</span>
              </el-form-item>

              <el-form-item label="品牌:">
                <el-input
                  v-model="mirrorNetworkCardInfo.brand"
                  maxlength="30"
                  show-word-limit
                  :name="'brand_'+index"
                  v-validate="'max:30'"
                >
                  <template slot="append">G</template>
                </el-input>
                <span class="field-error" v-show="errors.has('brand_'+index+':max')">品牌长度最大为 10 位</span>
              </el-form-item>

              <el-form-item label="备注:">
                <el-input
                  type="textarea"
                  maxlength="255"
                  show-word-limit
                  v-validate="'max:255'"
                  :name="'remarks_'+index"
                  v-model="mirrorNetworkCardInfo.remarks"
                ></el-input>
                <span class="field-error" v-show="errors.has('remarks_'+index+':max')">备注长度最大为 255 位</span>
              </el-form-item>
            </el-form>
          </td>
          <td align="center">
            <el-row>
              <el-button
                type="primary"
                size="mini"
                @click="addTableRow('mirrorNetworkCardInfoList')"
              >新增
              </el-button>
            </el-row>

            <el-row>
              <el-button
                size="mini"
                type="danger"
                @click="deleteTableRow('mirrorNetworkCardInfoList',index)"
              >删除
              </el-button>
            </el-row>

          </td>
        </tr>
        </tbody>
      </table>
    </el-row>

    <el-row style="text-align: center;">
      <el-button
        size="mini"
        type="primary"
        @click="submit"
      >保存
      </el-button>
    </el-row>


  </div>

</div>
</div>
<div layout:fragment="js">
  <script src="/static/js/module/system-config/api/sysServerConfigApi.js"></script>
  <script src="/static/js/module/system-config/admin_server_config.js"></script>
</div>
</body>
</html>
